<template>
<!-- http://localhost:10001/#/purchase/initialvalue/supplieradd -->
  <div class="basicinformation_add">
    <el-main>
      <div>
        <div class="title">
          <span>基本信息</span>
          <div style="font-size: 12px;display: inline;margin-left: 8px;">(带“<p style="display: inline;color: red;">*</p>
            ”为必填项)</div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;"><span
              style="color: red;">*</span>名称</div>
          <div style="width: 300px;">
            <el-input v-model="data.name" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <!-- <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;"><span
              style="color: red;">*</span>编号</div>
          <div style="width: 300px;">
            <el-input v-model="data.code" placeholder="请输入内容"></el-input>
          </div>
        </div> -->
      </div>
      <div>
        <div class="title">
          <span>通讯信息</span>
          <div style="font-size: 12px;display: inline;margin-left: 8px;">(带“<p style="display: inline;color: red;">*</p>
            ”为必填项)</div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;"><span
              style="color: red;">*</span>联系人</div>
          <div style="width: 300px;">
            <el-input v-model="data.contact" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;"><span
              style="color: red;">*</span>联系电话</div>
          <div style="width: 300px;">
            <el-input v-model="data.phone" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;"><span
              style="color: red;">*</span>所在城市</div>
          <div style="width: 300px;">
            <el-input v-model="data.city" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;"><span
              style="color: red;">*</span>所在区</div>
          <div style="width: 300px;">
            <el-input v-model="data.area" placeholder="请输入内容"></el-input>
          </div>
        </div>

        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;">详细地址</div>
          <div style="width: 300px;">
            <el-input v-model="data.addr" placeholder="请输入内容"></el-input>

          </div>
        </div>
      </div>
      <div>
        <div class="title">
          <span>财务信息</span>

          <div style="font-size: 12px;display: inline;margin-left: 8px;">(带“<p style="display: inline;color: red;">*</p>
            ”为必填项)</div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;">开户名称</div>
          <div style="width: 300px;">
            <el-input v-model="cwxx_khmc" placeholder="请输入内容"></el-input>

          </div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;">开户银行</div>
          <div style="width: 300px;">
            <el-input v-model="cwxx_khyh" placeholder="请输入内容"></el-input>

          </div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;">银行账号</div>
          <div style="width: 300px;">
            <el-input v-model="cwxx_yhzh" placeholder="请输入内容"></el-input>

          </div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;">发票抬头</div>
          <div style="width: 300px;">
            <el-input v-model="cwxx_fptt" placeholder="请输入内容"></el-input>

          </div>
        </div>
        <div style="margin-top: 20px;display: flex;margin-bottom: 20px;">
          <div style="text-align: right;width: 100px;margin-top: 7px;margin-right: 10px;">税号</div>
          <div style="width: 300px;">
            <el-input v-model="cwxx_sh" placeholder="请输入内容"></el-input>

          </div>
        </div>
      </div>

<!--      <div>
        <div class="title">
          <span>基本信息</span>
          <div style="font-size: 12px;display: inline;margin-left: 8px;">（图片上传最多可上传五张）</div>
        </div>

        <div class="upload">
        	<el-upload action="https://up-z2.qiniup.com" :data="formToken" list-type="picture-card"
        		:on-success="uploadDetailImg" accept=".JPG,.PNG,.JPEG" :before-upload="beforeAvatarUpload"
        		:limit="25" :file-list="imgDetailList" :on-remove="delGoodsImg" :on-preview="handleImgPreview">
        		<i class="el-icon-plus"></i>
        	</el-upload>
        	<el-dialog :visible.sync="dialogVisible">
        		<img alt="" :src="dialogImageUrl" width="100%" />
        	</el-dialog>
        </div>
      </div> -->

      <div style="margin-top: 10px;">
        <el-button type="primary" @click="addfunc">保存</el-button>

        <el-button type="primary" plain @click="funcback" >取消</el-button>
      </div>
    </el-main>
  </div>
</template>

<script>
    import { getGoodsToken } from '@/api/goodslist'
  import { addsupplier } from '@/api/purchase/supplierapi'
  	import { getGoodsAddImg, getGoodsDelImg } from '@/api/goodsimg'
  import { handleActivePath } from '@/utils/routes'
  import { mapActions } from 'vuex'
  export default{
    data() {
      return{
        formToken: {
          key: '',
          token: '',
        },
        data:{
          formToken: {
            key: '',
            token: '',
          },
          fileList:[],
          name: "",
          code: "",
          contact: "",
          phone: "",
          province: "",
          city: "",
          area: "",
          addr: "",
          status: 1,
          remarks: "",
        },
        imgDetailList:[],
        dialogVisible:false,
        domain: 'https://cdn.weikedashi.net/',
        dialogImageUrl:"",
        jbxx_name:"",  //基本信息名称
        txxx_lxr:"",//通讯信息联系人
        txxx_lxdh:"",//通讯信息联系电话
        txxx_dh:"",//通讯信息电话
        txxx_xxdz:"",//通讯信息详细地址
        cwxx_khmc:"",//财务信息开户名称
        cwxx_khyh:"",//财务信息开户银行
        cwxx_yhzh:"",//财务信息银行账号
        cwxx_fptt:"",//财务信息发票抬头
        cwxx_sh:"",//财务信息税号
        zhxx_dlzh:"",//账号信息登录账号
        zhxx_mm:"",//账号信息密码
      }
    }
    // ,
    // props:{
    //   "on-success":this.successtest()
    // }
    ,methods:{
      ...mapActions({
        delVisitedRoute: 'tabs/delVisitedRoute',
      }),
      async uploadDetailImg(res, file) {
        console.log("成功",res.key);
        console.log(this.domain+res.key);

        console.log("成功",file);
      	// this.Imgdata.is_primary = 2
      	// this.initAddImg(res, file)
      },
      async beforeAvatarUpload(file) {
      if (file.size / 1024 / 1024 > 3) {
      	this.$message({
      	  message: '上传文件大小不能超过 3MB!',
      	  type: 'error'
      	})
      	return false
        }
        const res = await getGoodsToken()
        this.formToken.token = res.data.token
        this.generate_key()
        console.log("图片",this.formToken);
      },
      //图片超出限制
      MoreImg() {
        this.$message.warning('当前限制选择 1 个文件,需删除之前图片')
      },
      handleImgPreview(file) {
        console.log(282,file);
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      async delGoodsImg(file) {
        console.log(file);
        const res = await getGoodsDelImg({
          id: file.uid,
        })
        console.log(res);
        if (res.data) {
          this.$notify({
            message: '图片删除成功',
            type: 'success',
          })
          // this.getList()
        }
      },
      // async delGoodsImg(file) {
      //   console.log(file);
      // 	let res = await getGoodsDelImg({
      // 		id: file.id,
      // 	})
      //   console.log(res);
      //   this.$message.success("删除成功")
      // },
      successtest(res, file){
        // this.imageUrl = URL.createObjectURL(file.raw);
        console.log(URL.createObjectURL(file.raw));
        console.log("a",a);
        console.log("b",b);
        console.log("c",c);
      },
      generate_key() {
        var timestamp = new Date().getTime()
        var str = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
        var arr = str.split('')
        var result = ''
        for (var i = 0; i < 8; i++) {
          var n = Math.floor(Math.random() * arr.length)
          result += arr[n]
        }
        this.formToken.key = result + timestamp
      },
      funcback(){
        this.$confirm('确定返回列表页面?', '确定', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            const detailPath = await handleActivePath(this.$route, true)
            await this.$router.push('/purchase/initialvalue_supplier')
            await this.delVisitedRoute(detailPath)
          })
          .catch(() => {})
      },
      async addfunc(){
        // this.$refs.upload.submit();
        // return
        if(this.data.name == ""){
          this.$message({
            message:"名称未填写",
            type:"error"
          })
          return
        }
        // if(this.data.code == ""){
        //   this.$message({
        //     message:"编号未填写",
        //     type:"error"
        //   })
        //   return
        // }
        if(this.data.contact == ""){
          this.$message({
            message:"联系人未填写",
            type:"error"
          })
          return
        }
        if(this.data.phone.length != 11){
          this.$message({
            message:"联系电话填写错误",
            type:"error"
          })
          return
        }
        if(this.data.city == ""){
          this.$message({
            message:"所在城市未填写",
            type:"error"
          })
          return
        }
        if(this.data.area == ""){
          this.$message({
            message:"所在城市未填写",
            type:"error"
          })
          return
        }
        // {
        //   "name": "供应商名称",
        //   "code": "供应商编码",
        //    "remarks": "描述",
        //    "province": "湖南省",
        //    "city": "长沙市",===========
        //    "area": "芙蓉区",======
        //    "phone": "18229806324",
        //     "contact": "联系人",
        //    "addr": "金桂小区",
        //      "status": 11,
        //      "wsId": 1,
        //      "sysId": 17
        // }

        let res = await addsupplier(this.data)
        if(res.status == 200){
          this.$message({
            message:"保存成功",
            type:"success"
          })
          this.$router.push('/purchase/initialvalue_supplier')
        }else{
          this.$message({
            message:"错误",
            type:"error"
          })
        }
      }
    }
  }
</script>

<style>
  .basicinformation_add .title {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
  }

  .basicinformation_add .title span {
    display: inline-block;
    padding-left: 8px;
    font-size: 16px;
    border-left: 4px solid #1890FF;
  }

  .basicinformation_add .title p {
    display: inline;
  }
</style>
